<template>
	<view class="tabs-wrap" :class="{'sticky-top':sticky}" :style="{top:_top+'px'}" :key="_top">
		<view v-if="title" class="tabs-title">
			<view class="line" :class="'bg-blue'"></view>
			<text>{{title}}</text>
		</view>
		<view class="page-tab">
			<scroll-view class="tab-box" scroll-x="true">
				<view class="tab-box-flex" :class="twoTab?'max_width':null">
					<view class="atc " v-for="(item,index) in list" :key="item.name"
						:class="[index == currentIndex ? 'active text-blue' : 'text',{'scrollable':scrollable}]"
						@tap="changeTab(index,item)">
						<view class="title">
							<text>{{item[name] || item['name']}}</text>
							<view class="line line2"
								:class="[index == currentIndex?'active':'','bg-' + 'blue']"></view>
						</view>


					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "MyTab",
		props: {
			twoTab: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: []
			},
			currentIndex: {
				type: [String, Number],
				default: 0
			},
			name: {
				type: String,
				default: 'name'
			},
			sticky: {
				type: Boolean,
				default: true
			},
			scrollable: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				top: 0
			}
		},
		computed: {
			_top() {
				return this.top
			}
		},
		methods: {
			changeTab(index, item) {
				this.$emit('change', {
					index,
					item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-wrap {
		// background-color: #FFFFFF;
		// overflow: hidden;
		margin-bottom: 5upx;

		&.sticky-top {
			position: sticky;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 1;
		}

		.tabs-title {
			font-size: 36upx;
			font-family: Adobe Heiti Std;
			font-weight: bold;
			color: #2A2B31;
			margin-top: 20upx;
			padding: 0 20upx;
			display: flex;
			align-items: center;

			.line {
				width: 4upx;
				height: 40upx;
				border-radius: 2upx;
				margin-right: 20upx;
			}
		}

		.page-tab {
			position: relative;
			box-sizing: border-box;
			width: 100%;

			.tab-box-flex {
				width: 100%;
				display: flex;
				align-items: center;

				&.max_width {

					.atc {
						width: 50%;
					}
				}

				// justify-content: space-between;
				.atc {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					flex: 1;
					height: 76upx;
					box-sizing: border-box;
					font-size: 24upx;
					font-family: HYQiHei;
					font-weight: normal;


					&.scrollable {
						flex: none;
						padding: 0 30rpx;
					}

					&.active {
						transition: all 0.2s ease;
						font-size: 28upx;
						color: #222222;
						font-weight: 700;
					}

					&.text {
						color: #666666;
					}

					.title {
						position: relative;
					}

					.line {
						margin-top: 10upx;
						width: 0%;
						height: 8upx;
						border-radius: 3upx;
						opacity: 0;

						&.active {
							width: 50%;
							transition: all 0.5s ease;
							opacity: 1;

						}
					}

					.line2 {
						width: 0%;
						height: 8upx;
						border-radius: 3upx;
						opacity: 0;
						background: linear-gradient(90deg, rgba(245, 193, 92, 0) 0%, #aba7a7 100.93%) !important;

						&.active {
							width: 100%;
							transition: all 0.5s ease;
							opacity: 1;

						}
					}
				}
			}

			.tab-row {
				position: relative;
				top: 0;
				left: 0;
				width: 100%;
				height: 100upx;

				.tab-box {}
			}
		}

	}
</style>
